<ul class="nav">
    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
        <span translate="aside.nav.HEADER">Navigation</span>
    </li>
    <li>
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <i class="glyphicon glyphicon-stats icon text-primary-dker"></i>
            <span class="font-bold" translate="aside.nav.DASHBOARD">Dashboard</span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a href>
                    <span translate="aside.nav.DASHBOARD">Dashboard</span>
                </a>
            </li>
            <li class="sub-li">
                <!-- <a ui-sref="app.dashboard-v1">
                  <span>Dashboard v1</span>
                </a> -->
                <a href class="auto">
                    <span class="pull-right text-muted">
                        <i class="fa fa-fw fa-angle-right text"></i>
                        <i class="fa fa-fw fa-angle-down text-active"></i>
                    </span>
                    <!-- <i class="glyphicon glyphicon-stats icon text-primary-dker"></i> -->
                    <span class="font-bold">Dashboard v1</span>
                </a>
                <ul class="nav nav-sub dk">
                    <li class="nav-sub-header">
                        <a href>
                            <span>Dashboard v1</span>
                        </a>
                    </li>
                    <li ui-sref-active="active">
                        <a ui-sref="app.dashboard-v1">
                            <span>Dashboard v1-1</span>
                        </a>
                    </li>
                    <li ui-sref-active="active">
                        <a ui-sref="app.dashboard-v2">
                            <span>Dashboard v1-2</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.dashboard-v2">
                    <b class="label bg-info pull-right">N</b>
                    <span>Dashboard v2</span>
                </a>
            </li>
        </ul>
    </li>
    <li ui-sref-active="active">
        <a ui-sref="app.calendar">
            <i class="glyphicon glyphicon-calendar icon text-info-dker"></i>
            <span class="font-bold" translate="aside.nav.CALENDAR">Calendar</span>
        </a>
    </li>
    <li ui-sref-active="active">
        <a ui-sref="app.mail.list">
            <b class="badge bg-info pull-right">9</b>
            <i class="glyphicon glyphicon-envelope icon text-info-lter"></i>
            <span class="font-bold" translate="aside.nav.EMAIL">Email</span>
        </a>
    </li>
    <li>
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <i class="glyphicon glyphicon-th-large icon text-success"></i>
            <span class="font-bold">Apps</span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a href>
                    <span>Apps</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="apps.note">
                    <span>Note</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="apps.contact">
                    <span>Contacts</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.weather">
                    <span>Weather</span>
                </a>
            </li>
        </ul>
    </li>

    <li class="line dk"></li>

    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
        <span translate="aside.nav.components.COMPONENTS">Components</span>
    </li>
    <li>
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <b class="badge bg-info pull-right">3</b>
            <i class="glyphicon glyphicon-th"></i>
            <span>Layout</span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a href>
                    <span>Layout</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="layout.app">
                    <span>Application</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="layout.fullwidth">
                    <span>Full width</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="layout.mobile">
                    <span>Mobile</span>
                </a>
            </li>
        </ul>
    </li>
    <li ng-class="{active:$state.includes('app.ui')}">
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <i class="glyphicon glyphicon-briefcase icon"></i>
            <span translate="aside.nav.components.ui_kits.UI_KITS">UI Kits</span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a href>
                    <span translate="aside.nav.components.ui_kits.UI_KITS">UI Kits</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.buttons">
                    <span translate="aside.nav.components.ui_kits.BUTTONS">Buttons</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.icons">
                    <b class="badge bg-info pull-right">3</b>
                    <span translate="aside.nav.components.ui_kits.ICONS">Icons</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.grid">
                    <span translate="aside.nav.components.ui_kits.GRID">Grid</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.widgets">
                    <b class="badge bg-success pull-right">13</b>
                    <span translate="aside.nav.WIDGETS">Widgets</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.bootstrap">
                    <b class="badge bg-primary pull-right">16</b>
                    <span translate="aside.nav.components.ui_kits.BOOTSTRAP">Bootstrap</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.sortable">
                    <span translate="aside.nav.components.ui_kits.SORTABLE">Sortable</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.portlet">
                    <span translate="aside.nav.components.ui_kits.PORTLET">Portlet</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.timeline">
                    <span translate="aside.nav.components.ui_kits.TIMELINE">Timeline</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.tree">
                    <span>Tree</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.toaster">
                    <span>Toaster</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.jvectormap">
                    <span translate="aside.nav.components.ui_kits.VECTOR_MAP">Vector Map</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.ui.googlemap">
                    <span>Google Map</span>
                </a>
            </li>
        </ul>
    </li>
    <li ng-class="{active:$state.includes('app.table')}">
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <b class="label bg-primary pull-right">2</b>
            <i class="glyphicon glyphicon-list"></i>
            <span translate="aside.nav.components.table.TABLE">Table</span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a href>
                    <span translate="aside.nav.components.table.TABLE">Table</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.table.static">
                    <span translate="aside.nav.components.table.TABLE_STATIC">Table static</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.table.angulartable">
                    <span translate="aside.nav.components.table.ANGULARTABLE">Angular Table</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.table.datatable">
                    <span translate="aside.nav.components.table.DATATABLE">Datatable</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.table.footable">
                    <span translate="aside.nav.components.table.FOOTABLE">Footable</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.table.grid">
                    <span>ngGrid</span>
                </a>
            </li>
        </ul>
    </li>
    <li ng-class="{active:$state.includes('app.form')}">
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <i class="glyphicon glyphicon-edit"></i>
            <span translate="aside.nav.components.form.FORM">Form</span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a href>
                    <span translate="aside.nav.components.form.FORM">Form</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.form.elements">
                    <span translate="aside.nav.components.form.FORM_ELEMENTS">Form elements</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.form.validation">
                    <span translate="aside.nav.components.form.FORM_VALIDATION">Form validation</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.form.wizard">
                    <span translate="aside.nav.components.form.FORM_WIZARD">Form wizard</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.form.fileupload">
                    <span>File upload</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.form.imagecrop">
                    <span>Image crop</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.form.select">
                    <span>Select</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.form.slider">
                    <span>Slider</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.form.editor">
                    <span>Editor</span>
                </a>
            </li>
        </ul>
    </li>
    <li ui-sref-active="active">
        <a ui-sref="app.chart">
            <i class="glyphicon glyphicon-signal"></i>
            <span translate="aside.nav.components.CHART">Chart</span>
        </a>
    </li>
    <li ng-class="{active:$state.includes('app.page')}">
        <a href class="auto">
            <span class="pull-right text-muted">
                <i class="fa fa-fw fa-angle-right text"></i>
                <i class="fa fa-fw fa-angle-down text-active"></i>
            </span>
            <i class="glyphicon glyphicon-file icon"></i>
            <span translate="aside.nav.components.pages.PAGES">Pages</span>
        </a>
        <ul class="nav nav-sub dk">
            <li class="nav-sub-header">
                <a href>
                    <span translate="aside.nav.components.pages.PAGES">Pages</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.page.profile">
                    <span translate="aside.nav.components.pages.PROFILE">Profile</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.page.post">
                    <span translate="aside.nav.components.pages.POST">Post</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.page.search">
                    <span translate="aside.nav.components.pages.SEARCH">Search</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.page.invoice">
                    <span translate="aside.nav.components.pages.INVOICE">Invoice</span>
                </a>
            </li>
            <li ui-sref-active="active">
                <a ui-sref="app.page.price">
                    <span>Price</span>
                </a>
            </li>
            <li>
                <a ui-sref="lockme">
                    <span translate="aside.nav.components.pages.LOCK_SCREEN">Lock screen</span>
                </a>
            </li>
            <li>
                <a ui-sref="access.signin">
                    <span translate="aside.nav.components.pages.SIGNIN">Signin</span>
                </a>
            </li>
            <li>
                <a ui-sref="access.signup">
                    <span translate="aside.nav.components.pages.SIGNUP">Signup</span>
                </a>
            </li>
            <li>
                <a ui-sref="access.forgotpwd">
                    <span translate="aside.nav.components.pages.FORGOT_PASSWORD">Forgot password</span>
                </a>
            </li>
            <li>
                <a ui-sref="access.404">
                    <span translate="aside.nav.components.pages.404">404</span>
                </a>
            </li>
        </ul>
    </li>

    <li class="line dk hidden-folded"></li>

    <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
        <span translate="aside.nav.your_stuff.YOUR_STUFF">Your Stuff</span>
    </li>
    <li>
        <a ui-sref="app.page.profile">
            <i class="icon-user icon text-success-lter"></i>
            <b class="badge bg-success pull-right">30%</b>
            <span translate="aside.nav.your_stuff.PROFILE">Profile</span>
        </a>
    </li>
    <li>
        <a ui-sref="app.docs">
            <i class="icon-question icon"></i>
            <span translate="aside.nav.your_stuff.DOCUMENTS">Documents</span>
        </a>
    </li>
</ul>
